<template>
  <view class="search-drugs">
    <view class="desc">
      <view v-for="item in drugList" :key="item.baseDrugId" class="info" @click="selectDrug(item)">
        <image
          v-if="item.outerPackagePicUrl"
          class="img"
          lazy-load
          mode="aspectFit"
          :src="item.outerPackagePicUrl"
        ></image>
        <image v-else class="img" lazy-load mode="aspectFit" :src="zwtp"></image>
        <view v-if="item.productName === '' || item.productName === '无'" class="name">
          {{ item.commonName }}
        </view>
        <view v-else class="name">{{ item.commonName }} ({{ item.productName }})</view>
        <view class="spe">
          {{ item.preparationUnit }}*{{ item.packageSize }}{{ item.minimumUnit }}/{{ item.packageUnit }}
        </view>

        <!-- 已添加 -->
        <div v-if="item.select" class="repeat">已添加</div>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data() {
    return {
      zwtp: 'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-community/zwtp.png',
      drugList: [
        {
          baseDrugId: '31',
          drugId: null,
          commonName: '阿托伐他汀钙胶囊',
          producerName: '河南天方药业股份有限公司',
          productCode: '00140001',
          productName: '尤佳',
          preparationUnit: '10mg',
          packageSize: '7',
          minimumUnit: '粒',
          packageUnit: '盒',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151207/81ed75c57ebc415daa18f6d5605a30e5.jpg',
          useAmount: 1,
          frequency: 1,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '西药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '40',
          drugId: null,
          commonName: '参松养心胶囊',
          producerName: '北京以岭药业有限公司',
          productCode: '00180001',
          productName: 'l',
          preparationUnit: '400mg',
          packageSize: '36',
          minimumUnit: '粒',
          packageUnit: '盒',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151207/3583ba30922a4b6da90a33ee11524940.jpg',
          useAmount: 3,
          frequency: 1,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '中成药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '43',
          drugId: null,
          commonName: '地奥心血康软胶囊',
          producerName: '成都地奥制药集团有限公司',
          productCode: '00200001',
          productName: 'l',
          preparationUnit: '0.35g',
          packageSize: '30',
          minimumUnit: '粒',
          packageUnit: '盒',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151204/4afa81b895b54d8ca457866bad97a923.jpg',
          useAmount: 2,
          frequency: 3,
          dosage: '软胶囊剂',
          amount: null,
          largeClass: '中成药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo:
            '《冠心病稳定型心绞痛中医诊疗指南》,《中西医结合Ⅰ期心脏康复共识》,《急性心肌梗死中西医结合诊疗专家共识》',
          medicalInsuranceDirectoryCategory: 1,
          isJointStock: 0,
          consistency: 2,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '191',
          drugId: null,
          commonName: '金水宝胶囊',
          producerName: '江西济民可信金水宝制药有限公司',
          productCode: '00330001',
          productName: 'l',
          preparationUnit: '0.33g',
          packageSize: '63',
          minimumUnit: '粒',
          packageUnit: '瓶',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151204/346055c46fcd44c4ae03885a3d470b29.jpg',
          useAmount: 6,
          frequency: 1,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '中成药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '198',
          drugId: null,
          commonName: '坎地沙坦酯胶囊',
          producerName: '江苏苏中药业集团股份有限公司',
          productCode: '00380001',
          productName: '苏纳',
          preparationUnit: '4mg',
          packageSize: '14',
          minimumUnit: '粒',
          packageUnit: '盒',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151204/f05d2528dad94c0daf809703a85218c2.jpg',
          useAmount: 1,
          frequency: 1,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '西药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '206',
          drugId: null,
          commonName: '脑心通胶囊',
          producerName: '陕西步长制药有限公司',
          productCode: '01030001',
          productName: '步长',
          preparationUnit: '0.4g',
          packageSize: '36',
          minimumUnit: '粒',
          packageUnit: '盒',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151204/48a0bb1da2ec4dd59ee44f7a599e0039.jpg',
          useAmount: 2,
          frequency: 3,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '中成药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '218',
          drugId: null,
          commonName: '通心络胶囊',
          producerName: '石家庄以岭药业股份有限公司',
          productCode: '01120001',
          productName: '无',
          preparationUnit: '0.26g',
          packageSize: '30',
          minimumUnit: '粒',
          packageUnit: '瓶',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151202/7a217a374a9f4243abdf47be306fbace.jpg',
          useAmount: 2,
          frequency: 3,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '中成药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '234',
          drugId: null,
          commonName: '缬沙坦胶囊',
          producerName: '北京诺华制药有限公司',
          productCode: '03060001',
          productName: '代文',
          preparationUnit: '80mg',
          packageSize: '7',
          minimumUnit: '粒',
          packageUnit: '盒',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151202/bcc4df897f8841b1aac464f08d1490cd.jpg',
          useAmount: 1,
          frequency: 1,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '西药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '235',
          drugId: null,
          commonName: '缬沙坦胶囊',
          producerName: '湖南千金湘江药业股份有限公司',
          productCode: '03060002',
          productName: '湘江',
          preparationUnit: '80mg',
          packageSize: '7',
          minimumUnit: '粒',
          packageUnit: '盒',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151202/4cc9aafa9441488a94c4f6c442c82215.jpg',
          useAmount: 1,
          frequency: 1,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '西药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '236',
          drugId: null,
          commonName: '缬沙坦胶囊',
          producerName: '常州四药制药有限公司',
          productCode: '03060003',
          productName: '缬克',
          preparationUnit: '40mg',
          packageSize: '14',
          minimumUnit: '粒',
          packageUnit: '盒',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151202/f55ba86d210e4a91b4c8628638cbdb35.jpg',
          useAmount: 2,
          frequency: 1,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '西药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        }
      ]
    };
  },

  computed: {
    ...mapState('assess', {
      drugFind: 'drugs'
    })
  },

  onLoad(option) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('drugsEvent', (data) => {
      // 查询已添加的数据并标注
      const select = this.drugFind.map((item) => item.baseDrugId);
      data.forEach((item) => {
        if (select.includes(item.baseDrugId)) {
          item.select = 1;
        }
      });
      console.log(data);
      this.drugList = data;
    });
  },

  methods: {
    // 选择药品
    async selectDrug(item) {
      console.log(item);
      if (item.select) return;

      this.$store.commit('assess/SET_DRUGS', item);
      this.$wxPromise.navigateBack({
        delta: 2
      });
      // data.frequency = data.frequency ? data.frequency : 1;
      // data.useAmount = 1; // 每次吃几片（默认）
      // this.$store.commit('assess/SET_DRUGS', data);
      // this.$store.commit('assess/DEL_SCAN_DRUGS');
      // // eslint-disable-next-line no-undef
      // const routers = getCurrentPages();
      // for (let r = 0; r < routers.length; r++) {
      //   if (routers[r].route === 'pages/diseaseAssess/index') {
      //     uni.navigateBack({
      //       delta: routers.length - 1 - r
      //     });
      //     return;
      //   }
      // }
      // uni.redirectTo({
      //   url: 'pages/diseaseAssess/index'
      // });
    }
  }
};
</script>

<style lang="scss">
.search-drugs {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .desc {
    margin-top: 24rpx;
    margin-left: 24rpx;
    .info {
      box-shadow: rgba(0, 0, 0, 0.05) 0px 4rpx 8rpx 0px;
      background: #ffffff;
      padding-bottom: 24rpx;
      border-radius: 8rpx;
      height: 500rpx;
      width: 340rpx;
      margin-bottom: 22rpx;
      float: left;
      position: relative;
    }
    .info:nth-child(odd) {
      margin-right: 20rpx;
    }

    .img {
      width: 100%;
      height: 340rpx;
      border-radius: 8rpx;
    }
    .name {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.9);
      padding: 0 16rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .spe {
      margin-top: 24rpx;
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.3);
      padding: 0 16rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
  .desc:after {
    content: ' ';
    height: 0;
    display: block;
    clear: both;
  }
  .none-list {
    text-align: center;
    color: #a2a1a1;
    margin-top: 40rpx;
  }
  .repeat {
    width: 96rpx;
    height: 48rpx;
    background: linear-gradient(236deg, #f34e1c 0%, #ef3931 100%);
    border-radius: 8rpx 0px 8rpx 0px;
    color: #ffffff;
    font-size: 24rpx;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 48rpx;
  }
}
</style>
